<template>
	<view class="position-relative">
		<image class="header-bg position-absolute" src="/static/index/header-bg.png"></image>
		<view class="content">
			<view class="pt-100 position-relative z-index-2">
				<view class="flex align-center">
					<image class="logo" src="/static/index/logo.png"></image>
					<image class="header-title" src="/static/index/header-title.png"></image>
				</view>
				<view @click="gotoSearch"
					class="flex align-center justify-between bg-white rounded-radius search-view border-box font-sm">
					请输入诗人、年级、朝代进行搜索
					<image src="/static/index/search-icon.png"></image>
				</view>
			</view>
		</view>
		<scroll-view scroll-x="true" class="grade-view border-box">
			<view class="grade-item border-box bg-white position-relative overflow-hidden text-1D1C1C mr-2"
				v-for="(item,index) in gradeDict" :key="item.id" @click="gotoAncientPoetryList(item)">
				<view class="bg position-absolute" :class="'bg-'+index%3"></view>
				<view class="position-relative z-index-2 grade-content flex flex-column align-center">
					<image :src='"/static/index/grade-"+index%3+".png"'></image>
					<view class="font-base grade-text">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="content">
			<view class="pt-3 flex align-center justify-between">
				<view class="font-weight-bold font-md text-1D1C1C">诗人</view>
				<view class="flex align-center" @click="gotoAuthorList">
					<view class="font-base text-969696">更多</view>
					<image src="/static/index/arrow.png" class="icon-sm"></image>
				</view>
			</view>
			<view class="auth-list pt-3">
				<template v-if="authorList.length == 0">
					<view class="bg-white pr-3 rounded-radius-l mb-2">
						<m-skeleton :rows="1"></m-skeleton>
					</view>
					<view class="bg-white pr-3 rounded-radius-l mb-2">
						<m-skeleton :rows="1"></m-skeleton>
					</view>
					<view class="bg-white pr-3 rounded-radius-l">
						<m-skeleton :rows="1"></m-skeleton>
					</view>
				</template>
				<template v-else>
					<view class="bg-white rounded-radius-l flex mb-2" @click="gotoAuthorDetail(item._id)" v-for="item in authorList" :key="item._id">
						<image class="rounded-radius-l" :src="item.headshot"></image>
						<view class="auth-content flex flex-column justify-around">
							<view class="auth-name flex align-center">
								<view class="font-weight-bold text-1D1C1C font mr-1">{{item.name}}</view>
								<view class="font-sm text-EB5656 dynasty-icon flex align-center justify-center border-box">
									{{item.dynastyName}}
								</view>
							</view>
							<view class="text-ellipsis text-1D1C1C font-sm">{{item.introduction}}
							</view>
						</view>
					</view>
				</template>
			</view>
			<view style="position: sticky;top: 0;background: #F9F9F9;padding-bottom: 4px;">
				<view class="pt-5 flex align-center justify-between">
					<view class="font-weight-bold font-md text-1D1C1C">古诗列表</view>
				</view>
				<scroll-view scroll-x="true" class="dynasty-view border-box mt-3">
					<view class="dynasty-item border-box mr-3 font-sm" :class="dynastyId == item.id ? 'active' : ''"
						v-for="(item,index) in dynastyDict" :key="item.id" @click="changeDynasty(item)">
							{{item.name}}
					</view>
					<view style="width: 60rpx;display: inline-block;"></view>
				</scroll-view>
			</view>
			<m-empty v-if="contentList.length == 0" msg="加载中..."></m-empty>
			<view style="min-height: 480px;" v-else>
				<view class="bg-white rounded-radius-l p-3 mt-3" v-for="item in contentList" :key="item._id"
					@click="gotoAncientPoetryDetail(item)">
					<view class="flex align-center">
						<view class="font-md font-weight-bold text-1D1C1C">{{item.title}}</view>
						<view class="font-sm text-EB5656 dynasty-icon flex align-center justify-center border-box ml-3">
							{{item.dynastyName}}
						</view>
						<view class="font-sm text-1D1C1C ml-1">{{item.authorName}}</view>
					</view>
					<view class="font-sm-l text-646464 ancient-poetry-content mt-1">
						<span v-for="(cItem,cIndex) in item.content" :key="cIndex">{{cItem}}
							<block v-if="cIndex%2 == 0">，</block>
							<block v-if="cIndex%2 == 1">。</block><br v-if="cIndex%2 == 1" />
						</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		gradeDict,
		dynastyDict
	} from '@/common/dict.js'
	import {
		ref,
		getCurrentInstance
	} from 'vue';

	const instance = getCurrentInstance();
	const globalProperties = instance.appContext.config.globalProperties
	const dynastyId = ref(dynastyDict[0].id);
	const contentList = ref([]);
	const authorList = ref([]);

	function changeDynasty(item) {
		dynastyId.value = item.id
		getAncientPoetryContent()
	}
	// 前往搜索
	function gotoSearch() {
		uni.navigateTo({
			url: '/pages/search/index'
		})
	}
	// 前往作者列表
	function gotoAuthorList() {
		uni.navigateTo({
			url: '/pages/author/list'
		})
	}
	// 前往作者详情
	function gotoAuthorDetail(id) {
		uni.navigateTo({
			url: '/pages/author/detail?id='+ id
		})
	}
	// 前往古诗详情
	function gotoAncientPoetryDetail(item) {
		uni.navigateTo({
			url: '/pages/ancientPoetry/detail?id=' + item._id
		})
	}
	// 前往古诗列表
	function gotoAncientPoetryList(item) {
		uni.navigateTo({
			url: '/pages/ancientPoetry/list?id=' + item.id + '&name=' + item.name
		})
	}
	// 获取内容列表
	function getAncientPoetryContent() {
		contentList.value = []
		globalProperties.$request({
			db: 'ancient-poetry-content',
			name: 'getContent',
			params: {
				dynastyId: dynastyId.value
			}
		}, (res => {
			contentList.value = res.data
		}),true)
	}
	getAncientPoetryContent()
	// 获取内容列表
	function getAuthorContent() {
		contentList.value = []
		globalProperties.$request({
			db: 'a-author',
			name: 'getRandomData',
		}, (res => {
			authorList.value = res.data
		}),true)
	}
	getAuthorContent()
</script>
<style>
	page {
		background: #F9F9F9;
		padding-bottom: 50rpx;
	}
</style>

<style lang="scss" scoped>
	.header-bg {
		width: 750rpx;
		height: 544rpx;
	}

	.content {
		width: 670rpx;
		margin: 0 auto;

		.logo {
			width: 104rpx;
			height: 104rpx;
		}

		.header-title {
			width: 194.15rpx;
			height: 31.48rpx;
		}

		.search-view {
			color: #969696;
			height: 80rpx;
			padding: 0 32rpx;

			image {
				width: 40rpx;
				height: 40rpx
			}
		}

		.auth-list {
			>view {
				padding: 24rpx 0 24rpx 30rpx;

				image {
					width: 128rpx;
					height: 128rpx;
				}

				.auth-content {
					width: 456rpx;
					margin-left: 26rpx;

				}
			}
		}

		.dynasty-icon {
			padding: 4rpx 6rpx;
			border-radius: 8rpx;
			background: #FDEEEE;
		}

		.dynasty-view {
			width: 750rpx;
			white-space: nowrap;
		
			.dynasty-item {
				display: inline-block;
				padding: 10rpx 28rpx;
				background: #EFEFEF;
				color: #969696;
				border-radius: 125px;
				transition: all .2s;
				&.active {
					color: #EB5656;
					background: #F8E9E9;
					font-weight: bold;
				}
			}
		}

		.ancient-poetry-content {
			line-height: 42rpx;
		}
	}

	.grade-view {
		margin-top: 32rpx;
		margin-left: 5.33%;
		width: 94.67%;
		white-space: nowrap;

		.grade-item {
			display: inline-block;
			width: 204rpx;
			height: 204rpx;
			border-radius: 32rpx;
			border: 4rpx solid #fff;

			.bg {
				width: 100%;
				height: 118rpx;
				opacity: 0.5;
			}

			.bg-0 {
				background: linear-gradient(180deg, #BBD7FF 3%, #FFFFFF 100%);
			}

			.bg-1 {
				background: linear-gradient(180deg, #DFBBF7 3%, #FFFFFF 100%);
			}

			.bg-2 {
				background: linear-gradient(180deg, #F7BBBB 3%, #FFFFFF 100%);
			}

			.grade-content {
				padding-top: 26rpx;

				image {
					width: 96.43rpx;
					height: 84rpx;
				}

				.grade-text {
					margin-top: 24rpx;
				}
			}

			&:last-child {
				margin-right: 40rpx;
			}
		}


	}
</style>